<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="author" title="Mollah Zhou" href="mailto:onlymollah@gmail.com">
<style>
    .container {
		padding-left: 120px;
        width: 700px;
        height: 500px;
        bordeR: 1px solid black;
        overflow-x: hidden;
        overflow-y: scroll;
        text-align: justify;
        font-family: Tahoma, Geneva, sans-serif;
    }
    .float-left {
        float: left;
        width: 120px;
        height: 80px;
        /*margin-left: -40px;*/
    }
	.ellipse{
		background-color: #FC0;		
		/* 
			Ellipse - negative cx, negative cy, positive rx, ry - ref test
			set the ellipse of shape-outside
		*/
		shape-outside: ellipse(-60px, -40px, 50px, 50px);
		-webkit-shape-outside: ellipse(-60px, -40px, 50px, 50px);
		/*
		it can use with the down data:
		-webkit-clip-path: ellipse(-60px, -40px, 50px, 50px);
		if only set it, it is just clip the path, but it takes the whole place.
		*/
	}
	.txt{background-color:#999;}	
    /*.ellipse {
        shape-outside: ellipse(50%, 50%, 25%, 50%);
         clip-path is not working with prefix-free. 
        -webkit-clip-path: ellipse(50%, 50%, 25%, 50%);
        -background: orange;
        shape-margin: 5px;
		-webkit-shape-outside: ellipse(50%, 50%, 25%, 50%);
         clip-path is not working with prefix-free. 
        --webkit-clip-path: ellipse(50%, 50%, 25%, 50%);
        -webkit-shape-margin: 5px;
    }*/
</style>
</head>

<body>
	<div class=container>
        <h3>The circle and the ellipse</h3>
        <div class="float-left ellipse"></div>
        <p class="txt">Once upon a time, there was a green circle. A very ordinary green circle. The circle could roll this way and that. It was also very round. Oh, and very green. The circle wasn't bothered by how very ordinary things were, in fact; it couldn't have been happier. Being green and round was the circle's very favorite things.</p>        
    </div>

</body>
</html>
